<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>价格修改记录</span>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>
    <van-loading v-show="isLoading" size="24px" style="width: 100%;height: 80%;
    display:flex;align-items:center;justify-content:center; color: #1da4f2" vertical>
      加载中...
    </van-loading>
    <van-empty
      style="width: 100%;height: 60%"
      v-show="PriceList.length <= 0 && isLoading === false"
      class="custom-image"
      :image="require('../../../assets/空两本书.png')"
      :description=" `暂无`+typeText+`价格修改记录`"
    />
    <div class="otherBox"
         v-show="PriceList &&
         PriceList[index+1] &&
          (PriceList[index].rebate !== PriceList[index+1].rebate ||
           PriceList[index].rebate_amount !== PriceList[index+1].rebate_amount) "
         v-for="(item, index) in PriceList"
         :key="index">
      <div class="box_header fontSize15">
        <span class="colorGary">
          <img class="timeImg" src="../../../assets/预约时间@2x.png" alt="">
          {{item.created_at}}
        </span>
        <span>修改人：{{item.NICK_NAME}}</span>
      </div>
      <div class="box_p fontSize13 fontWeightBlod">
        <span>修改内容</span>
        <span>修改前</span>
        <span>修改后</span>
<!--        <span >时长</span>-->
      </div>
      <div class="box_p">
        <span class="fontSize13">标准价格</span>
        <span class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined ? PriceList[index+1].amount + '元' : '暂无'}}</span>
        <span class="fontSize15 colorGary fontWeightBlod"
        :class="PriceList[index+1] !== undefined && PriceList[index+1].amount != PriceList[index].amount ? 'colorRed' : ''"
        >{{PriceList[index] !== undefined ? PriceList[index].amount + '元' : '暂无'}}</span>
      </div>
      <div class="box_p">
        <span class="fontSize13">价格折扣</span>
        <span class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined ? PriceList[index+1].rebate + '折' : '暂无'}}</span>
        <span class="fontSize15 colorGary fontWeightBlod"
              :class="PriceList[index+1] !== undefined && PriceList[index+1].rebate != PriceList[index].rebate ? 'colorRed' : ''"
        >{{PriceList[index] !== undefined ? PriceList[index].rebate + '折' : '暂无'}}</span>
      </div>
      <div class="box_p">
        <span class="fontSize13">折后价格</span>
        <span class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined ? PriceList[index+1].rebate_amount + '元' : '暂无'}}</span>
        <span class="fontSize15 colorGary fontWeightBlod"
              :class="PriceList[index+1] !== undefined && PriceList[index+1].rebate_amount != PriceList[index].rebate_amount ? 'colorRed' : ''"
        >{{PriceList[index] !== undefined ? PriceList[index].rebate_amount + '元' : '暂无'}}</span>
      </div>
      <div class="box_p" v-if="type !== 1">
        <span class="fontSize13">项目时长</span>
        <span class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined ? PriceList[index+1].duration + '分钟' : '暂无'}}</span>
        <span class="fontSize15 colorGary fontWeightBlod"
              :class="PriceList[index+1] !== undefined && PriceList[index+1].duration != PriceList[index].duration ? 'colorRed' : ''"

        >{{PriceList[index] !== undefined ? PriceList[index].duration + '分钟' : '暂无'}}</span>
      </div>
<!--      <div class="box_p">
        <span class="fontSize13">修改前</span>
        <span class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined && PriceList[index+1] !== null ? PriceList[index+1].rebate + '折' : '暂无'}}</span>
        <span class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined ? PriceList[index+1].rebate_amount + '元' : '暂无'}}</span>
&lt;!&ndash;        <span v-if="type !== 1" class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined ? PriceList[index+1].duration + '分钟' : '暂无'}}</span>&ndash;&gt;
      </div>
      <div class="box_p">
        <span class="fontSize13">修改后</span>
        <span class="fontSize15  fontWeightBlod"
              :class="PriceList[index] && PriceList[index+1] && PriceList[index].rebate != PriceList[index+1].rebate ? 'colorRed' : ''"
        >{{item.rebate}}折</span>
        <span class="fontSize15  fontWeightBlod"
              :class="PriceList[index] && PriceList[index+1] && PriceList[index].rebate_amount != PriceList[index+1].rebate_amount ? 'colorRed' : ''"
        >{{item.rebate_amount}}元</span>
&lt;!&ndash;        <span v-if="type !== 1" class="fontSize15 colorRed fontWeightBlod">{{item.duration}}分钟</span>&ndash;&gt;
      </div>-->
    </div>
    <div class="otherBox"
         v-show="index == PriceList.length-1"
         v-for="(item, index) in PriceList"
         :key="index">
      <div class="box_header fontSize15">
        <span class="colorGary">
          <img class="timeImg" src="../../../assets/预约时间@2x.png" alt="">
          {{item.created_at}}
        </span>
        <span>修改人：{{item.NICK_NAME}}</span>
      </div>
      <div class="box_p fontSize13 fontWeightBlod">
        <span>修改内容</span>
        <span>修改前</span>
        <span>修改后</span>
        <!--        <span >时长</span>-->
      </div>
      <div class="box_p">
        <span class="fontSize13">标准价格</span>
        <span class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined ? PriceList[index+1].amount + '元' : '暂无'}}</span>
        <span class="fontSize15 colorGary fontWeightBlod"
              :class="PriceList[index+1] !== undefined && PriceList[index+1].amount != PriceList[index].amount ? 'colorRed' : ''"
        >{{PriceList[index] !== undefined ? PriceList[index].amount + '元' : '暂无'}}</span>
      </div>
      <div class="box_p">
        <span class="fontSize13">价格折扣</span>
        <span class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined ? PriceList[index+1].rebate + '折' : '暂无'}}</span>
        <span class="fontSize15 colorGary fontWeightBlod"
              :class="PriceList[index+1] !== undefined && PriceList[index+1].rebate != PriceList[index].rebate ? 'colorRed' : ''"
        >{{PriceList[index] !== undefined ? PriceList[index].rebate + '折' : '暂无'}}</span>
      </div>
      <div class="box_p">
        <span class="fontSize13">折后价格</span>
        <span class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined ? PriceList[index+1].rebate_amount + '元' : '暂无'}}</span>
        <span class="fontSize15 colorGary fontWeightBlod"
              :class="PriceList[index+1] !== undefined && PriceList[index+1].rebate_amount != PriceList[index].rebate_amount ? 'colorRed' : ''"
        >{{PriceList[index] !== undefined ? PriceList[index].rebate_amount + '元' : '暂无'}}</span>
      </div>
      <div class="box_p" v-if="type !== 1">
        <span class="fontSize13">项目时长</span>
        <span class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined ? PriceList[index+1].duration + '分钟' : '暂无'}}</span>
        <span class="fontSize15 colorGary fontWeightBlod"
              :class="PriceList[index+1] !== undefined && PriceList[index+1].duration != PriceList[index].duration ? 'colorRed' : ''"

        >{{PriceList[index] !== undefined ? PriceList[index].duration + '分钟' : '暂无'}}</span>
      </div>
<!--      <div class="box_p fontSize13">-->
<!--        <span>修改前/后</span>-->
<!--        <span>折扣</span>-->
<!--        <span>价格</span>-->
<!--&lt;!&ndash;        <span v-if="type !== 1">时长</span>&ndash;&gt;-->
<!--      </div>-->
<!--      <div class="box_p">-->
<!--        <span class="fontSize13">修改前</span>-->
<!--        <span class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined && PriceList[index+1] !== null ? PriceList[index+1].rebate + '折' : '暂无'}}</span>-->
<!--        <span class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined ? PriceList[index+1].rebate_amount + '元' : '暂无'}}</span>-->
<!--&lt;!&ndash;        <span v-if="type !== 1" class="fontSize15 colorGary fontWeightBlod">{{PriceList[index+1] !== undefined ? PriceList[index+1].duration + '分钟' : '暂无'}}</span>&ndash;&gt;-->
<!--      </div>-->
<!--      <div class="box_p">-->
<!--        <span class="fontSize13">修改后</span>-->
<!--        <span class="fontSize15  fontWeightBlod"-->
<!--              :class="PriceList[index] && PriceList[index+1] && PriceList[index].rebate != PriceList[index+1].rebate ? 'colorRed' : ''"-->
<!--        >{{item.rebate}}折</span>-->
<!--        <span class="fontSize15  fontWeightBlod"-->
<!--        :class="PriceList[index] && PriceList[index+1] && PriceList[index].rebate_amount != PriceList[index+1].rebate_amount ? 'colorRed' : ''">{{item.rebate_amount}}元</span>-->
<!--&lt;!&ndash;        <span v-if="type !== 1" class="fontSize15 colorRed fontWeightBlod">{{item.duration}}分钟</span>&ndash;&gt;-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  name: 'PriceUpdateHistory',
  data () {
    return {
      type: Number(sessionStorage.getItem('type')),
      team_id: this.$route.query.team_id,
      id: this.$route.query.id,
      isLoading: true,
      PriceList: []
    }
  },
  computed: {
    typeText () {
      if (this.type === 1) {
        return '图文咨询'
      } else if (this.type === 2) {
        return '视频咨询'
      } else if (this.type === 3) {
        return '居家康复'
      } else if (this.type === 4) {
        return '居家护理'
      } else if (this.type === 5) {
        return '远程会诊'
      }
    }
  },
  mounted () {
    if (this.team_id !== undefined && this.team_id !== null && this.team_id !== '') {
      this.getTeamHisData()
    } else {
      this.getHisData()
    }
  },
  methods: {
    // 团队价格
    getTeamHisData () {
      this.isLoading = true
      // 查看团队价格维护修改记录列表
      // findTeamAmountLog
      this.$http.findTeamAmountLog({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.isLoading = false
            this.PriceList = res.data.data
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 个人价格
    getHisData () {
      this.isLoading = true
      // 查询修改记录列表
      // findDocAmountLog
      this.$http.findDocAmountLog({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.isLoading = false
            this.PriceList = res.data.data
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #FAF9FE;
  font-family: "PingFang SC";
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  width: 13px;
  height: 13px;
  margin-right: 5px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.tuWenBox,
.otherBox{
  border-radius: 10px;
  background: #fff;
  width: 95%;
  margin: 10px auto auto auto;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.05);
}
.timeImg{
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.box_header,
.box_header span,
.box_p
{
  display: flex;
  align-items: center;
}
.box_header{
  height: 44px;
  justify-content: space-between;
  border-bottom: 1px solid #E5E5E5;
}
.box_header,
.box_p
{
  padding: 0 15px;
  box-sizing: border-box;
}
.box_p {
  height: 35px;
  justify-content: space-between;
}
.box_p span{
  justify-content: center;
  flex: 1;
  text-align: center;
}
.colorGary{
  color: #999;
}
.colorRed{
  color: #EC6941;
}
.fontSize13{
  font-size: 13px;
}
.fontSize15{
  font-size: 15px;
}
.fontWeightBlod{
  font-weight: bold;
}
</style>
